.search-chart-hit-rich-data {
    // Keep in sync with SCATTER_THUMBNAIL_WIDTH and SCATTER_THUMBNAIL_HEIGHT
    $scatter-thumbnail-width: 300px;
    $scatter-thumbnail-height: 200px;

    $grid-gap: 16px;

    background-color: $blue-5;
    padding: 16px;

    @include sm-only {
        padding: 12px;
    }

    .search-chart-hit-rich-data__header {
        display: flex;
        justify-content: space-between;
        gap: 24px;

        @include sm-only {
            gap: 0px;
        }
    }

    .search-chart-hit-rich-data__header-actions {
        display: flex;
        gap: 16px;
        align-self: flex-start;
        flex-shrink: 0;

        .search-chart-hit-rich-data__button {
            padding: 5px 8px;
            font-size: 13px;
            white-space: nowrap;
            border-radius: 4px;

            &:hover {
                background-color: #bed2e7;
            }

            @include sm-only {
                display: none;
            }
        }
    }

    .search-chart-hit-rich-data__content {
        margin-top: 16px;
        display: grid;
        gap: $grid-gap;
        align-items: flex-end;

        &.search-chart-hit-rich-data__content--medium {
            grid-template-rows: repeat(2, auto);
            grid-template-columns: repeat(8, minmax(0, 1fr));

            @include md-down {
                margin-top: 12px;

                // The number of columns are set in the component
                --num-columns: 4; // fallback value
                grid-template-columns: repeat(
                    calc(2 * var(--num-columns)),
                    120px
                );

                // Horizontal scroll container with scroll snapping
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                -webkit-overflow-scrolling: touch;

                // Hide scrollbar
                scrollbar-width: none; /* Firefox */
                -ms-overflow-style: none; /* Internet Explorer and Edge */
                &::-webkit-scrollbar {
                    display: none; /* Safari and Chrome */
                }
            }
        }

        &.search-chart-hit-rich-data__content--large {
            grid-template-rows: repeat(2, 1fr);
            grid-template-columns: repeat(4, minmax(0, 1fr));
            align-items: flex-start;
        }

        .search-chart-hit-captioned-link-label-content svg {
            margin-right: 4px;
            color: $blue-60;
            height: 12px;
            width: 12px;
            vertical-align: -1.625px;
        }
    }

    .search-chart-hit-rich-data__placeholder {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        height: 100%;

        .search-chart-hit-rich-data__thumbnail-placeholder {
            height: 100%;
            width: 100%;
            background: $blue-10;
        }

        &.large-variant__single-cell
            .search-chart-hit-rich-data__thumbnail-placeholder,
        &.medium-variant__single-slot
            .search-chart-hit-rich-data__thumbnail-placeholder {
            aspect-ratio: calc(
                $grapher-thumbnail-width / $grapher-thumbnail-height
            );
        }

        .search-chart-hit-rich-data__captioned-link-label {
            @include note-1-regular;
            color: $blue-90;
            text-decoration: underline;
            text-underline-offset: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 100%;
            height: 16px;
            background: $blue-10;
            width: 40px;
        }
    }

    .search-chart-hit-rich-data__content--scatter
        .search-chart-hit-rich-data__placeholder.medium-variant__single-slot
        .search-chart-hit-rich-data__thumbnail-placeholder {
        aspect-ratio: calc(
            $scatter-thumbnail-width / $scatter-thumbnail-height
        );
    }

    @include md-down {
        .search-chart-hit-data-display {
            display: none;
        }
    }

    .search-chart-hit-table-wrapper {
        background: #fff;
        width: 100%;
        position: relative;

        .search-chart-hit-table-wrapper-content {
            height: 100%;
        }

        .search-chart-hit-table {
            padding: 6px 12px;
        }
    }

    // Medium variant grid slots
    .search-chart-hit-rich-data__content--medium {
        // Keep in sync with NUM_DATA_TABLE_ROWS_PER_COLUMN_IN_MEDIUM_VARIANT
        $num-rows-per-column-without-caption: 4;
        $num-rows-per-column: $num-rows-per-column-without-caption + 1;

        // Applies to any medium variant grid slot
        .medium-variant__slot {
            .search-chart-hit-table-wrapper {
                position: relative;
            }

            .search-chart-hit-table-wrapper-content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
            }

            .search-chart-hit-table {
                grid-template-rows: repeat($num-rows-per-column, 1fr);
            }
        }

        .medium-variant__single-slot {
            grid-column: span 2;
            grid-row: span 2;

            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    $grapher-thumbnail-width / $grapher-thumbnail-height
                );
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        .medium-variant__double-slot {
            grid-column: span 4;
            grid-row: span 2;

            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    (2 * $grapher-thumbnail-width + 1 * $grid-gap) /
                        $grapher-thumbnail-height
                );
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .medium-variant__triple-slot {
            grid-column: span 6;
            grid-row: span 2;

            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    (3 * $grapher-thumbnail-width + 2 * $grid-gap) /
                        $grapher-thumbnail-height
                );
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .medium-variant__quad-slot {
            grid-column: span 8;
            grid-row: span 2;

            // No need to maintain a certain aspect ratio since there is no thumbnail
            .search-chart-hit-table-wrapper {
                height: 120px;
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .medium-variant__small-slot-left {
            grid-column: 7;
            grid-row: 2;

            // Takes up a full slot on smaller screens
            @include md-down {
                grid-column: span 2;
                grid-row: span 2;
            }

            .chart-hit-img-error {
                font-size: 0.6em;
            }
        }

        .medium-variant__small-slot-right {
            grid-column: 8;
            grid-row: 2;

            // Takes up a full slot on smaller screens
            @include md-down {
                grid-column: span 2;
                grid-row: span 2;
            }

            .chart-hit-img-error {
                font-size: 0.6em;
            }
        }

        .data-slot {
            grid-column: 7 / 9;
            grid-row: 1;
        }
    }

    // Medium variant grid slots (sized for scatters)
    .search-chart-hit-rich-data__content--medium.search-chart-hit-rich-data__content--scatter {
        // Keep in sync with SCATTER_NUM_DATA_TABLE_ROWS_PER_COLUMN_IN_MEDIUM_VARIANT
        $scatter-num-rows-per-column-without-caption: 6;
        $scatter-num-rows-per-column: $scatter-num-rows-per-column-without-caption +
            1;

        .medium-variant__slot {
            .search-chart-hit-table {
                grid-template-rows: repeat($scatter-num-rows-per-column, 1fr);
            }
        }

        .medium-variant__single-slot {
            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    $scatter-thumbnail-width / $scatter-thumbnail-height
                );
            }
        }

        .medium-variant__double-slot {
            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    (2 * $scatter-thumbnail-width + 1 * $grid-gap) /
                        $scatter-thumbnail-height
                );
            }
        }

        .medium-variant__triple-slot {
            .search-chart-hit-table-wrapper {
                @include aspect-ratio(
                    (3 * $scatter-thumbnail-width + 2 * $grid-gap) /
                        $scatter-thumbnail-height
                );
            }
        }
    }

    // Large variant grid slots
    .search-chart-hit-rich-data__content--large {
        // Keep in sync with NUM_DATA_TABLE_ROWS_PER_COLUMN_IN_MEDIUM_VARIANT
        $num-rows-per-column-without-caption: 10;
        $num-rows-per-column: $num-rows-per-column-without-caption + 1;

        // Applies to any large variant grid slot
        .large-variant__slot {
            .search-chart-hit-table {
                grid-template-rows: repeat($num-rows-per-column, 1fr);
            }
        }

        .large-variant__single-cell {
            grid-column: span 1;
            grid-row: span 1;
        }

        .large-variant__top-right-cell {
            grid-column: 4;
            grid-row: 1;
        }

        .large-variant__bottom-right-cell {
            grid-column: 4;
            grid-row: 2;
        }

        .large-variant__right-quad-left-column {
            grid-column: 3;
            grid-row: 1 / -1;

            height: 100%;

            .search-chart-hit-table-wrapper {
                height: calc(100% - 24px);
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(1, 1fr);
            }
        }

        .large-variant__right-quad {
            grid-column: 3 / -1;
            grid-row: 1 / -1;

            height: 100%;

            .search-chart-hit-table-wrapper {
                height: calc(100% - 24px);
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .large-variant__left-quad {
            grid-column: 1 / 3;
            grid-row: 1 / -1;

            height: 100%;

            .search-chart-hit-thumbnail {
                height: calc(100% - 24px);
                background-color: #fff;
                display: flex;
                align-items: center;
            }

            .search-chart-hit-table-wrapper {
                height: calc(100% - 24px);
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .large-variant__full {
            grid-column: 1 / -1;
            grid-row: 1 / -1;

            height: 330px;

            .search-chart-hit-table-wrapper {
                height: calc(100% - 24px);
            }

            .search-chart-hit-table {
                grid-template-columns: repeat(4, 1fr);
            }
        }
    }
}
